<template>
  <div class="hotelManage">
    <div class="manage">
      <h2>管理当前入驻酒店</h2>
      <div />
    </div>
    <div class="searchBox">
      <div class="flex search">
        <el-input v-model="searchName" style="margin-right:10px;" placeholder="酒店名称" />
        <el-button type="primary" style="margin-left:30px;" @click="fetchData">搜索</el-button>
        <el-button type="primary" @click="addHotel()">新增酒店</el-button>
      </div>

    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        border
        :data="this.hotelLists"
        tooltip-effect="dark"
        style="width: 100%;"
      >
        <el-table-column align="center" prop="id" label="酒店ID" min-width="80" />
        <el-table-column align="center" prop="hotelName" label="酒店名称" min-width="100" />
        <el-table-column align="center" prop="address" label="详细地址" min-width="150" />
        <el-table-column align="center" prop="openTime" label="开业时间" min-width="100" />
        <el-table-column align="center" prop="phone" label="联系方式" min-width="100" />
        <el-table-column align="center" prop="roomSum" label="客房总数" min-width="80" />
        <el-table-column align="center" prop="level" label="星级" min-width="80" />
        <el-table-column align="center" prop="minPrice" label="最低价格" min-width="100" />
        <el-table-column align="center" prop="saleStatus" label="是否上架" min-width="90">
          <div slot-scope="scope">
            <el-tag v-show="scope.row.saleStatus==1" type="success">未上架</el-tag>
            <el-tag v-show="scope.row.saleStatus==2" type="danger">已上架</el-tag>
          </div>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250" prop="id">
          <div slot-scope="scope">
            <el-button type="primary" size="small" @click="modifyHotel(scope.row)">
              <i class="el-icon-edit" />修改
            </el-button>
            <el-button type="primary" size="small" @click="checkHotel(scope.row.id)">
              <i class="el-icon-delete-solid" />删除
            </el-button>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <!-- 跳转 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5,10,20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
        :page-size="size"
        @current-change="handleCurrentChange"
        @size-change="sizeData"
      />



    <!-- 修改酒店信息 -->
    <el-dialog title="修改酒店信息" :visible.sync="modifyDialog" width="1000px">
      <!-- 新增酒店主图 -->
      <div class="room flex" style="padding-left:3%;">
        <div style="width:100%;" class="flex">
          <div class="smallTitle">
            <b>酒店主图</b>
          </div>
<!--          <el-upload-->
<!--            ref="upload"-->
<!--            class="upload-demo"-->
<!--            list-type="picture"-->
<!--            multiple-->
<!--            name="image"-->
<!--            :headers="headers"-->
<!--            :on-success="handleSuccess"-->
<!--            action="/api/upload/image"-->
<!--          >-->
<!--            &lt;!&ndash; :file-list="fileList" &ndash;&gt;-->
<!--            <el-button size="small" type="primary">点击上传</el-button>-->
<!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过100M。图片名不能包含中文和特殊符号</div>-->
<!--          </el-upload>-->

          <el-upload
            class="avatar-uploader"
            action="/api/upload/image"
            name="image"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleSuccess">
            <img v-if="hotelMainLogo" :src="hotelMainLogo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </div>



        <div style="width:100%;margin-top:30px;" class="flex">
          <div class="smallTitle">
            <b>酒店log</b>
          </div>
          <el-upload
            class="avatar-uploader"
            action="/api/upload/image"
            name="image"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleSuccessL">
            <img v-if="hotelLogo" :src="hotelLogo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <el-form>
          <div class="inputBox">
            <el-form-item label="选择地址" prop="hotelDesc">
              <!-- v-model="proCity" -->
              <v-distpicker
                :city="this.city"
                :province="this.province"
                :area="this.district"
                style="font-size:13px"
                name="city"
                @province="onChangeProvince"
                @city="onChangeCity"
                @area="onChangeArea"
              />
            </el-form-item>
          </div>
          <el-form-item label="详细地址" prop="address" class="inputForm">
                        <el-input v-model="ruleForm.address" placeholder="请输入详细地址" maxlength="18" />

          </el-form-item>

          <el-form-item label="酒店名称" prop="hotelName" class="inputForm" style="margin:15px 0;">
             <el-input v-model="ruleForm.hotelName" placeholder="请输入酒店名称" maxlength="18" />

          </el-form-item>
          <el-form-item label="经度" prop="longitude" class="inputForm">
            <el-input v-model="ruleForm.longitude" placeholder="请输入经度" maxlength="11" />
          </el-form-item>
          <el-form-item label="纬度" prop="latitude" class="inputForm">
            <el-input v-model="ruleForm.latitude" placeholder="请输入纬度" maxlength="11" />
          </el-form-item>

          <el-form-item label="联系电话" prop="phone" class="inputForm">
            <el-input v-model="ruleForm.phone" placeholder="请输入联系电话" maxlength="11" />
          </el-form-item>

          <div class="inputBox flex">
            <el-form-item label="是否上架" prop="saleStatus" class="selectForm">
              <el-select v-model="saleStatus" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="酒店星级" prop="hotelDesc" class="selectForm">
              <el-select v-model="level" placeholder="请选择">
                <el-option
                  v-for="item in hotelStar"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <!-- 地址选择 -->

          <div class="inputBox flex">
            <el-form-item label="入住时间" prop="hotelDesc" class="inputForm flex">
              <el-time-select
                v-model="enterTime"
                :default-value="enterTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30'
                }"
                placeholder="入住时间"
              />
            </el-form-item>
            <el-form-item label="离开时间" class="inputForm flex">
              <el-time-select
                v-model="leaveTime"
                :default-value="leaveTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30'
                }"
                placeholder="入住时间"
              />
            </el-form-item>

          </div>
          <div class="inputBox">
            <el-form-item label="开业时间">
              <el-date-picker
                v-model="openTime"
                arrow-control
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
          <!-- 酒店标签。。。。。。。。。。 -->
          <div class="inputBox1">
            <el-form-item label="酒店描述" prop="hotelDesc">
              <textarea v-model="ruleForm.hotelDesc" placeholder="请输入对酒店的描述" class="hotelDesc" />
            </el-form-item>
          </div>
          <div class="inputBox">
            <el-form-item label="酒店标签：">
              <div style="width:85%;" class="tagForm flex">
                <div
                  v-for="(tag,index) in hotelTags"
                  :key="index2"
                  class="el-tags el-tag"
                  :disable-transitions="false"
                >
                  {{ tag }}
                  <i class="el-icon-delete" @click="delTags(index2)" />
                </div>
                <el-input
                  v-if="inputVisible"
                  ref="saveTagInput"
                  v-model="inputValue"
                  class="input-new-tag"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirmTags"
                />
                <el-button
                  v-else
                  type="success"
                  class="button-new-tag"
                  size="small"
                  @click="showInputTags"
                >+ 新增</el-button>
              </div>
            </el-form-item>
          </div>
          <!-- 网络服务。。。。。。。。。。。 -->
          <div class="inputBox">
            <el-form-item label="网络服务：">
              <div style="width:85%;" class="tagForm flex">
                <div
                  v-for="(tag,index) in network.tagValue"
                  :key="index2"
                  class="el-tags el-tag"
                  :disable-transitions="false"
                >
                  {{ tag }}
                  <i class="el-icon-delete" @click="delNetwork(index2)" />
                </div>
                <el-input
                  v-if="inputNetwork"
                  ref="inputNetworkRef"
                  v-model="inputNetworks"
                  class="input-new-tag"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirmNetwork"
                />
                <el-button
                  v-else
                  type="success"
                  class="button-new-tag"
                  size="small"
                  @click="showNetworkInput"
                >+ 新增</el-button>
              </div>
            </el-form-item>
          </div>
          <!-- 交通服务 -->
          <div class="inputBox">
            <el-form-item label="交通服务：">
              <div style="width:85%;" class="tagForm flex">
                <div
                  v-for="(tag,index) in traffic.tagValue"
                  :key="index2"
                  class="el-tags el-tag"
                  :disable-transitions="false"
                >
                  {{ tag }}
                  <i class="el-icon-delete" @click="delTraffic(index2)" />
                </div>
                <el-input
                  v-if="showtraffic"
                  ref="savetrafficInput"
                  v-model="inputTraffic"
                  class="input-new-tag"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirmTraffic"
                />
                <el-button
                  v-else
                  type="success"
                  class="button-new-tag"
                  size="small"
                  @click="showTraffic"
                >+ 新增</el-button>
              </div>
            </el-form-item>
          </div>
          <!-- 餐饮服务 -->
          <div class="inputBox">
            <el-form-item label="餐饮服务：">
              <div style="width:85%;" class="tagForm flex">
                <div
                  v-for="(tag,index) in restaurant.tagValue"
                  :key="index2"
                  class="el-tags el-tag"
                  :disable-transitions="false"
                >
                  {{ tag }}
                  <i class="el-icon-delete" @click="delRestaurant(index2)" />
                </div>
                <el-input
                  v-if="showrestaurant"
                  ref="saveRestaurant"
                  v-model="restaurants"
                  class="input-new-tag"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleRestaurants"
                />
                <el-button
                  v-else
                  type="success"
                  class="button-new-tag"
                  size="small"
                  @click="showRestaurant"
                >+ 新增</el-button>
              </div>
            </el-form-item>
          </div>
          <!-- 通用设施 -->
          <div class="inputBox">
            <el-form-item label="通用设施：">
              <div style="width:85%;" class="tagForm flex">
                <div
                  v-for="(tag,index) in currency.tagValue"
                  :key="index2"
                  class="el-tags el-tag"
                  :disable-transitions="false"
                >
                  {{ tag }}
                  <i class="el-icon-delete" @click="delCurrency(index2)" />
                </div>
                <el-input
                  v-if="showcurrency"
                  ref="saveCurrency"
                  v-model="currencys"
                  class="input-new-tag"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleCurrency"
                />
                <el-button
                  v-else
                  type="success"
                  class="button-new-tag"
                  size="small"
                  @click="showInputRurrency"
                >+ 新增</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <div class="setHotel">
          <el-button type="success" class="addbutton" @click="setHotel()">新增保存</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 酒店详情 -->
    <!-- 查看房型详细信息 -->
    <el-dialog title="查看酒店详细信息" :visible.sync="hotelDetailDialog" width="1100px" height="800px">
      <div class="room flex">
        <div class="mainImg">
          <img
            :src="'https://km-hotel.oss-cn-beijing.aliyuncs.com/'+ this.hotelDetail.hotalLogo"
            style="width:100%;height:400px;"
          >
        </div>
        <div class="picture">
          <el-carousel height="200px" indicator-position="none" style="border:0.5px solid grey;">
            <el-carousel-item v-for="item in this.hotelDetail.hotalMainLogos" :key="item">
              <img :src="'https://km-hotel.oss-cn-beijing.aliyuncs.com/'+ item" class="img">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="roomName flex">
          <div class="room_types">
            <b>酒店ID：</b>
            {{ this.hotelDetail.id }}
          </div>
          <div class="room_types">
            <b>酒店名称：</b>
            {{ this.hotelDetail.hotelName }}
          </div>
          <div class="room_types">
            <b>联系方式：</b>
            {{ this.hotelDetail.phone }}
          </div>
          <div class="room_types">
            <b>开业时间：</b>
            {{ this.hotelDetail.openTime }}
          </div>
          <div class="room_types">
            <b>入住时间：</b>
            {{ this.hotelDetail.enterTime }}
          </div>
          <div class="room_types">
            <b>退房时间：</b>
            {{ this.hotelDetail.leaveTime }}
          </div>
          <div class="room_types">
            <b>地址：</b>
            {{ this.hotelDetail.province }}{{ this.hotelDetail.city }}{{ this.hotelDetail.district }}
          </div>
          <div class="hotelAddress">
            <b>详细地址：</b>
            {{ this.hotelDetail.address }}
          </div>
        </div>
        <div class="tagBox">
          <b>酒店描述：</b>
          {{ this.hotelDetail.hotelDesc }}
        </div>
        <div class="tagBox">
          <b>酒店标签：</b>
          <el-tag v-for="tag in this.hotelDetail.tagList" :key="tag" class="hotelTag">{{ tag }}</el-tag>
        </div>
        <div v-for="tags in this.hotelDetail.hotalTags" class="tagBox flex">
          <b>{{ tags.tagKey }}:&nbsp;&nbsp;</b>
          <el-tag v-for="tag in tags.tagValue" class="tags" size="small">{{ tag }}</el-tag>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="导入酒店数据" :visible.sync="hotelFileDialog" width="40%">

      <input ref="file" type="file" @change="getfile">
      <el-button size="small" type="primary" @click="uploadFileX">立即上传</el-button>
      <el-button size="small" @click="hotelFileDialog=false">取消</el-button>


    </el-dialog>
  </div>
</template>

<script>

import hotelApi from '@/api/hotel'
import VDistpicker from 'v-distpicker'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { AMapManager } from 'vue-amap'
const amapManager = new AMapManager()

export default {
  name: 'HotelManage',
  inject: ['reload'],
  components: { VDistpicker },
  data() {
    return {
      file: {},
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [],
      hotelFileDialog: false,
      // 地图
      longitude: '',
      latitude: '',
      amapManager,
      zoom: 14,
      index2:'',
      center: [121.59996, 31.197646],
      slotStyle: {
        padding: '2px 8px',
        background: '#eee',
        color: '#333',
        border: '1px solid #aaa'
      },
      events: {
        init: o => {
          console.log(o.getCenter())
          console.log(this.$refs.map.$$getInstance())
          o.getCity(result => {
            console.log(result)
          })
        },
        moveend: () => {},
        zoomchange: () => {},
        click: e => {
          alert('map clicked')
        }
      },
      plugin: [
        'ToolBar',
        {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(o) {
              console.log(o)
            }
          }
        }
      ],
      markers: [],
      searchOption: {
        city: '',
        citylimit: true
      },
      mapCenter: [],
      //* ********************* */
      reload: this.reload,
      headers: { token: getToken() },
      // 搜索酒店列表
      searchCity: '',
      searchName: '',
      searchMinPrice: '',
      searchMaxPrice: '',
      total: 0,
      hotelStatu: '',
      currentPage: '',
      hotalTags: [],
      tags: '',
      // 新增酒店标签
      openTime: '',
      hotelTags: ['舒适'],
      hotelTag: '',
      leaveTime: '',
      enterTime: '',
      province: '',
      provinceCode: '',
      inputVisible: false,
      inputTags: false,
      inputValue: '',
      hotelStar: [{
        "id":2,
        "name":"普通酒店"
      },{
        "id":3,
        "name":"三星级酒店"
      },
      {
      "id":4,
      "name":"四星级酒店"
      },
        {
          "id":5,
          "name":"五星级酒店"
        }],
      id: '',
      city: '',
      cityCode: '',
      district: '',
      districtCode: '',
      hotelStarDesc: '',
      value: '',
      hotelDetail: {},
      hotelDetailDialog: false, // 酒店详情
      hotelMainLogo: '', // 酒店主图
      hotelLogo: '', // 酒店LOGO
      // 设施状态管理-------------------------
      imageUrl: '',
      tags: '',
      status: [
        {
          saleStatus: '1',
          label: '是'
        },
        {
          aleStatus: '2',
          label: '否'
        }
      ],
      saleStatus: '',
      serviceTag: [],
      inputNetworks: '',
      inputNetwork: false,
      network: {
        tagKey: '网络服务:',
        tagLogo: '1.png',
        tagType: 1,
        tagValue: ['免费wifi']
      },
      inputTraffic: '',
      showtraffic: false,
      traffic: {
        tagKey: '交通服务:',
        tagLogo: '2.png',
        tagType: 1,
        tagValue: ['免费停车']
      },
      restaurants: '',
      showrestaurant: false,
      restaurant: {
        tagKey: '餐饮服务:',
        tagLogo: '3.png',
        tagType: 1,
        tagValue: ['送餐服务', '咖啡厅', '茶室']
      },
      currencys: '',
      showcurrency: false,
      currency: {
        tagKey: '通用设施:',
        tagLogo: '3.png',
        tagType: 1,
        tagValue: [
          '有电梯',
          '行政楼层',
          '休息区',
          '外送洗衣服务',
          '房间消毒',
          '旅游票务服务',
          '无障碍通道',
          '24小时热水',
          '无烟楼层'
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      hotelLists: [],
      userID: '',
      city: '',
      hotelNameOrAddress: '',
      level: '',
      size: 20,
      currentPage: 1,
      hotelStarId: '',
      modifyDialog: false,
      ruleForm: {
        address: '',
        city: '',
        cityCode: '',
        district: '',
        districtCode: '',
        hotelDesc: '',
        hotelName: '',
        hotelId: '',
        hotelLogo: '',
        openTime: '',
        phone: '',
        province: '',
        provinceCode: '',
        saleStatus: 1,
        latitude: '',
        longitude: '',
        level:'',
        tags: '',
        levels: [{
          'id': 2,
          'value': '普通酒店'
        }
        ,{
          'id': 3,
          'value': '三星级'
        },
          {
            'id': 4,
            'value': '四星级'
          },
          {
            'id': 5,
            'value': '五星级'
          }
        ],
        levelDesc: '请输入酒店星级描述',
        levelType: '请输入酒店星级描述类型',
        levelValue: '请输入酒店星级'
      },
      rules: {
        levelDesc: [
          { required: true, message: '请输入酒店星级描述', trigger: 'blur' }
        ],
        levelType: [
          { required: true, message: '请输入酒店星级描述类型', trigger: 'blur' }
        ],
        levelValue: [
          { required: true, message: '请输入酒店星级', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {

    this.fetchData()

  },
  methods: {
    getfile() {
      this.file = event.target.files
      console.log(this.file, 'file')
    },
    uploadFileX() {
      // let file = this.$refs.file.files;
      const formData = new FormData()
      formData.append('file', this.file[0])
      console.log(formData)

      importHotal(formData).then(res => {
        console.log(res)
        this.reset()
      })
    },

    addHotelFile() {
      this.hotelLogo=""
      this.hotelMainLogo=""
      this.hotelFileDialog = true
    },
    getHotelFile() {
      getHotelFile().then(res => {
        console.log(res)
        const blob = new Blob([res], {
          type: res.type // 将会被放入到blob中的数组内容的MIME类型
        })
        const objectUrl = URL.createObjectURL(blob) // 生成一个url
        window.location.href = objectUrl // 浏览器打开这个url
      })
    },
    // 地图
    addMarker: function(lng, lat) {
      this.mapCenter.push([lng, lat])
    },
    onSearchResult(pois) {
      console.log(pois, 'test')
      // this.searchOption.city=this.city
      this.longitude = pois[0].lng
      this.latitude = pois[0].lat
      this.ruleForm.address = pois[0].address
      this.ruleForm.hotelName = pois[0].name
      this.addMarker(pois[0].lng, pois[0].lat)
    },fetchData() {
      // this.search()
      // 获取会员列表
      const data = {
        hotelName: this.searchName,
        page: this.currentPage,
        pageSize: this.size
      }
      console.log(data, '提交的要修改的东西')
      hotelApi.hotelList(data).then(res => {
        this.hotelLists = res.data
        this.total = res.count
        console.log(res, '获取酒店列表')
      })
    },
    // 页码
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.fetchData();
    },
    sizeData(pageSize){
      this.size=pageSize;
      this.fetchData();
    }
    // 查看酒店详情
    ,checkHotel(hotalId) {
      // console.log(hotalId)
      getHotalDetail(hotalId).then(res => {
        console.log(res, '获取酒店详情')
        this.hotelDetail = res
        this.tags = res.hotalTags
        this.hotelDetail.hotalTags = res.hotalTags
        for (var i = 0; i < this.hotelDetail.hotalTags.length; i++) {
          var value = this.hotelDetail.hotalTags[i].tagValue
          var jsonValue = value.substr(2, value.length - 4)
          jsonValue = jsonValue.split('","')
          this.hotelDetail.hotalTags[i].tagValue = jsonValue
        }
        this.hotelDetailDialog = true
      })
    },
    // 修改酒店
    modifyHotel(items) {
      console.log(this.city, 'city')
      console.log(items, 'items')
      this.modifyDialog = true
      this.ruleForm.hotelId = items.id
      this.ruleForm.phone = items.phone
      this.openTime = items.openTime
      this.leaveTime = items.leaveTime
      this.enterTime = items.enterTime
      this.ruleForm.hotelName = items.hotelName
      this.ruleForm.hotelDesc = items.hotelDesc
      this.ruleForm.address = items.address
      this.province = items.province
      this.provinceCode = items.provinceCode
      this.city = items.city
      this.cityCode = items.cityCode
      this.district = items.district
      this.districtCode = items.districtCode
      this.hotelStarDesc = items.levelDesc
      this.level=items.level
      this.hotelLogo=items.hotelLogo
      this.hotelMainLogo = items.hotelMainLogo
      this.ruleForm.latitude=items.latitude
      this.ruleForm.longitude=items.longitude

      if (items.saleStatus == 1) {
        this.saleStatus = '否'
      } else {
        this.saleStatus = '是'
      }
      getHotalDetail(items.id).then(res => {
        console.log(res, '获取酒店详情2')
        this.hotelTags = res.tagList
        this.network.tagValue = JSON.parse(res.hotalTags[0].tagValue)
        this.traffic.tagValue = JSON.parse(res.hotalTags[1].tagValue)
        this.restaurant.tagValue = JSON.parse(res.hotalTags[2].tagValue)
        this.currency.tagValue = JSON.parse(res.hotalTags[3].tagValue)
      })
    },
    // 上传文件
    upload() {
      this.$refs.upload.submit()
      console.log(
        this.$refs.upload.submit(),
        '---------------------------------------------------'
      )
    },
    beforeUpload(file) {
      // let isLt2M = true;
      // isLt2M = file.size / 1024 / 1024 < 100;
      // if (!isLt2M) {
      //   this.loading = false;
      //   this.$message.error("上传文件大小不能超过 100MB!");
      // }
      console.log('1')

      const timeStamp = new Date().getTime()
      const copyFile = new File([file], `${timeStamp}_${file.name}`)
      this.uploadFile(copyFile)
      // this.form.name = file.name
      return false
    },
    uploadFile(file) {
      console.log('2')
      const formdata = new FormData()
      formdata.append('lbf-file-upload', file)
      formdata.append('name', 'lbf-file-upload')
      formdata.append('_csrfToken', this.$ajax.getCsrfToken()._csrfToken)
      this.postForm(formdata)
    },
    postForm(formdata) {
      console.log('3')
      this.$ajax
        .post(this.imgUploadApi, formdata)
        .then(res => {
          console.log(res, 'upto')
          // if (res.code == null || res.code === 0) {
          //   // do something

          // } else {
          //   this.$message.error(res.msg || res.message || "文件上传失败");
          // }
        })
        .catch(err => {
          this.$message.error(err.message || '文件上传失败')
        })
    },
    handleSuccess(response, file, fileList) {
      this.hotelMainLogo =  response.data
    },
    handleSuccessL(response, file, fileList) {
      this.hotelLogo =  file.response.data
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
      this.loading = false
    },
    addHotel() {
      // this.id = 0
      this.city = ''
      this.district = ''
      this.province = ''
      this.ruleForm = {}
      this.hotelLogo=''
      this.hotelMainLogo=''
      this.modifyDialog = true
    },
    // 下载模板
    downloadAddHotelFile() {
      downloadeHotelFile().then(res => {
        console.log(res)
        const blob = new Blob([res], {
          type: res.type // 将会被放入到blob中的数组内容的MIME类型
        })
        const objectUrl = URL.createObjectURL(blob) // 生成一个url
        window.location.href = objectUrl // 浏览器打开这个url
      })
    },
    // 修改酒店信息
    modify(id) {
      this.hotelId = id
      this.modifyDialog = true
    },
    // 带参数跳转到获取房型
    getRoomType(id) {
      this.$router.push({
        name: 'houseManage',
        params: {
          id: id
        }
      })
    },
    // 分别获取省市地区
    onChangeProvince(a) {
      this.province = a.value
      this.provinceCode = a.code
      console.log(a)
    },
    onChangeCity(a) {
      this.city = a.value
      this.cityCode = a.code
      console.log(this.searchOption, 'p')
    },
    onChangeArea(a) {
      this.district = a.value
      this.districtCode = a.code
      this.searchOption.city = a.value

      console.log(a)
    },
    // 酒店设施标签。。。。。。。。。。。。
    delTags(index) {
      this.hotelTags.splice(index2, 1)
      console.log(this.hotelTags, '酒店标签')
    },
    showInputTags() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirmTags() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.hotelTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    // 网络服务标签。。。。。。。。。。。。。
    delNetwork(index) {
      this.network.tagValue.splice(index2, 1)
      console.log(this.network.tagValue, '网络服务')
    },
    showNetworkInput() {
      this.inputNetwork = true
      this.$nextTick(_ => {
        this.$refs.inputNetworkRef.$refs.input.focus()
      })
    },
    handleInputConfirmNetwork() {
      const inputNetworks = this.inputNetworks
      if (inputNetworks) {
        this.network.tagValue.push(inputNetworks)
      }
      this.inputNetwork = false
      this.inputNetworks = ''
    },
    // 交通服务标签。。。。。。。。。。。。
    delTraffic(index) {
      this.traffic.tagValue.splice(index2, 1)
      console.log(this.traffic, '酒店标签')
    },
    showTraffic() {
      this.showtraffic = true
      this.$nextTick(_ => {
        this.$refs.savetrafficInput.$refs.input.focus()
      })
    },
    handleInputConfirmTraffic() {
      const inputTraffic = this.inputTraffic
      if (inputTraffic) {
        this.traffic.tagValue.push(inputTraffic)
      }
      this.showtraffic = false
      this.inputTraffic = ''
    },
    // 餐饮服务标签。。。。。。。。。。。。
    delRestaurant(index) {
      this.restaurant.tagValue.splice(index2, 1)
      console.log(this.traffic, '酒店标签')
    },
    showRestaurant() {
      this.showrestaurant = true
      this.$nextTick(_ => {
        this.$refs.saveRestaurant.$refs.input.focus()
      })
    },
    handleRestaurants() {
      const restaurants = this.restaurants
      if (restaurants) {
        this.restaurant.tagValue.push(restaurants)
      }
      this.showrestaurant = false
      this.restaurants = ''
    },
    // 通用设施标签。。。。。。。。。。。。
    delCurrency(index) {
      this.currency.tagValue.splice(index2, 1)
      console.log(this.traffic, '通风服务标签')
    },
    showInputRurrency() {
      this.showcurrency = true
      this.$nextTick(_ => {
        this.$refs.saveCurrency.$refs.input.focus()
      })
    },
    handleCurrency() {
      const currencys = this.currencys
      if (currencys) {
        this.currency.tagValue.push(currencys)
      }
      this.showcurrency = false
      this.currencys = ''
    },
    // 设置酒店信息
    setHotel() {
      console.log(this.saleStatus)
      console.log(this.hotelStarDesc)
      for (let i = 0; i < this.hotelTags.length; i++) {
        this.hotelTag = this.hotelTag + this.hotelTags[i] + ';'
      }
      for (let i = 0; i < this.hotelStar.length; i++) {
        if (this.hotelStarDesc == this.hotelStar[i].levelDesc) {
          this.hotelStarId = this.hotelStar[i].id
        }
      }
      // 酒店状态
      if (this.saleStatus == '否') {
        this.hotelStatu = 1
      } else {
        this.hotelStatu = 2
      }
      // 酒店服务标签
      this.serviceTag.push(this.network)
      this.serviceTag.push(this.traffic)
      this.serviceTag.push(this.restaurant)
      this.serviceTag.push(this.currency)
      if (this.leaveTime.length < 6) {
        this.leaveTime = this.leaveTime + ':00'
      } else {
        this.leaveTime = this.leaveTime
      }
      if (this.enterTime.length < 6) {
        this.enterTime = this.enterTime + ':00'
      } else {
        // eslint-disable-next-line no-self-assign
        this.enterTime = this.enterTime
      }
      const data = {
        address: this.ruleForm.address,
        city: this.city,
        cityCode: this.cityCode,
        district: this.district,
        districtCode: this.districtCode,
        hotelDesc: this.ruleForm.hotelDesc,
        hotelName: this.ruleForm.hotelName,
        id: this.ruleForm.hotelId,
        level: this.level,
        hotelLogo: this.hotelLogo,
        hotelMainLogo: this.hotelMainLogo,
        openTime: this.openTime,
        phone: this.ruleForm.phone,
        province: this.province,
        provinceCode: this.provinceCode,
        saleStatus: this.hotelStatu,
        serviceTag: JSON.stringify(this.serviceTag).toString(),
        tags: this.hotelTag,
        leaveTime: this.leaveTime,
        enterTime: this.enterTime,
        latitude: this.ruleForm.latitude,
        longitude: this.ruleForm.longitude
      }
      console.log(data, '提交要修改的东西')

      let id= this.ruleForm.hotelId

      console.log("------------------------"+id)

      hotelApi.update(id,data).then(res => {
        console.log(res, '修改酒店信息')
        this.$message.success('新增修改成功')
      })
      this.modifyDialog = false
      this.reload()
    },
    search() {
      const data = {
        hotelName: this.searchName,
        page: 1,
        size: this.size
      }
      hotelList(data).then(res => {
        this.hotelLists = res.data
        console.log(res, '获取酒店列表')
      })
    },
    // 重置搜索
    reset() {
      this.reload()
    },
    // 获取房型
    getHotelType(id) {
      this.$router.push({
        name: 'houseManage',
        params: {
          id: id
        }
      })
    },
    // 获取订单
    getHotelOrder(items) {
      this.$router.push({
        name: 'order',
        params: {
          hotelName: items.hotelName
        }
      })
    },
    // 筛选
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    filterTag(value, row) {
      return row.member === value
    }
  }
}
</script>

<style scoped>
.el-vue-search-box-container .search-box-wrapper .search-btn {
  display: none !important;
}
.amap-demo {
  height: 300px;
  width: 600px;
}

.search-box {
  width: 380px;
  height: 40px;
  position: absolute;
  top: 0px;
  left: 0px;
  box-shadow: none;
  border: 1px solid #eaeaea;
}
.search-btn {
  display: none !important;
}

.amap-page-container {
  position: relative;
}
.hotelManage {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 管理酒店页面标题 */
.manage {
  height: 80px;
  text-align: center;
  width: 100%;
  position: relative;
}
.addButton {
  position: absolute;
  right: 3%;
  top: 30px;
}
.searchBox {
  width: 100%;
  padding: 0px 30px 10px 30px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  /* background-color: pink; */
}
.search {
  display: flex;
  flex-wrap: nowrap;
  width: 50%;
}
.addBox {
  width: 6%;
}
/* 房间详情表格 */

.miniTab {
  width: 55px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.miniButtom {
  padding: 7px 10px;
}
/* 新增楼层按钮盒子 */
.top {
  width: 100%;
  padding-top: 20px;
  height: 60px;
  display: flex;
  margin-left: 10px;
  line-height: 30px;
}
.addfloor {
  margin-left: 10px;
}
.remarks {
  font-size: 14px;
  margin-top: 5px;
  margin-left: 48.5%;
  color: rgb(143, 143, 143);
  white-space: nowrap;
}
/* 新增酒店 */
.inputBox {
  /* justify-content: space-between; */
  margin-top: 20px;
}
.inputForm {
  width: 45%;
  display: flex;
  flex-wrap: nowrap;
  margin-right: 2%;
}
.selectForm {
  width: 45%;
  display: flex;
  flex-wrap: nowrap;
  margin-right: 2%;
}
.tagForm {
  width: 95%;
  display: flex;
  flex-wrap: wrap;
}
/* 酒店标签 */
.el-icon-delete {
  margin-top: 8px;
  margin-left: 3px;
  display: none;
}
.el-tags {
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: nowrap;
  line-height: 30px;
}
.el-tags:hover .el-icon-delete {
  display: block;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}
.input-new-tag {
  display: block;
  width: 90px;
  margin-left: 10px;
  /* vertical-align: bottom; */
}
.hotelDesc {
  width: 50%;
  height: 100px;
  padding: 10px;
}
.room {
  width: 100%;
  /* background-color: pink; */
  /* width: 94%; */
  padding: 20px;
  margin-left: 3%;
  margin-top: 20px;
  border: 2px solid rgb(192, 192, 192);
  padding: 10px;
}
.state {
  padding: 10px 10px;
  width: 100%;
  height: 100%;
}
.tagBox {
  width: 95%;
  /* height: 40px; */
  margin-top: 20px;
  margin-left: 1%;
}
.tags {
  margin-right: 20px;
}
.hotelTag {
  margin-right: 20px;
  /* padding: 5px; */
}
/* 房间统计 */
.count {
  width: 19%;
  margin-top: 20px;
  border: 3px solid rgb(179, 179, 179);
  border-radius: 3px;
  padding: 10px;
}
.count .title {
  width: 100%;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  font-weight: 600px;
  color: brown;
}
.empty {
  border: 1px solid green;
  padding: 10px;
  margin: 5px 10px;
  margin-bottom: 20px;
}
.empty1 {
  border: 1px solid green;
  padding: 10px 50px 0px 10px;
  margin: 5px 10px;
  margin-bottom: 20px;
}
.count .title {
  width: 100%;
  height: 30px;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  font-weight: 500px;
  color: brown;
  margin-bottom: 10px;
}
.count_room {
  height: 30px;
  color: gray;
}
.dialog {
  padding-right: 25px;
}
.setHotel {
  width: 100%;
  text-align: center;
  /* background:pink; */
}
.buttonBox {
  width: 100%;
  /* background:pink; */
  text-align: center;
  padding-top: 20px;
}
.smallTitle {
  width: 80px;
  line-height: 45px;
  text-align: left;
}
.room_types {
  width: 33%;
  text-align: left;
  margin-top: 20px;
}
.hotelAddress {
  width: 66%;
  text-align: left;
  margin-top: 20px;
}
.room {
  width: 94%;
  margin-left: 3%;
  margin-top: 20px;
  border: 2px solid rgb(192, 192, 192);
  padding: 10px;
}
.roomTypeName {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.roomName {
  width: 70%;
  padding: 0px 20px;
}
.picture {
  width: 30%;
  position: relative;
  /* background:pink; */
}
.img {
  height: 200px;
  width: 291px;
}
.img1 {
  width: 786px;
  height: 400px;
}
.jumps {
  width: 100%;
  display: flex;
  flex-direction: row;
  line-height: 30px;
  position: fixed;
  bottom: 10px;
  background-color: rgb(255, 255, 255);
  z-index: 50;
}
.mainImg {
  width: 100%;
  height: 400px;
  /* margin-left: 2%; */
  margin-bottom: 20px;
}

.el-pagination{
  text-align: center;
  margin-top: 30px;
  margin-left: 330px;
}
</style>
